<template>
    <div class="banner">
        <el-carousel
            :height="bannerHeight"
            :interval="10000"
            :autoplay="false">
                <el-carousel-item v-for="(item, key) in list" :key="key">
                    <img :src="fileDomin + item" class="banImg"/>
                </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            list: [
                '/ban1.jpg'
            ],
            screenWidth: 0,
            aspectRatio: 2.5
        }
    },
    computed: {
        ...mapGetters(['fileDomin']),
        bannerHeight() {
            if (process.browser) {
                this.screenWidth = window.innerWidth > 1000 ? 1000 : window.innerWidth;
                if (this.screenWidth > 768) {
                    let BannerWidth = this.screenWidth * 0.7 / this.aspectRatio;
                    this.screenWidth = BannerWidth > 350 ? 350 : BannerWidth;
                } else {
                    this.screenWidth /= this.aspectRatio;
                }
            }
            return this.screenWidth + 'px';
        }
    },
    methods: {

    },
    mounted() {
        window.onresize = () => {
            this.screenWidth = window.innerWidth;
        }
    }
}
</script>
